<template>
  <div>{{ Man.name }}</div>
  <button @click="hanmes">点我</button>
  <form action="">
    <ul>
      <li v-for="item in list.arr">{{ item }}</li>
    </ul>
  </form>
</template>

<script setup lang="ts">
import {ref, reactive} from 'vue'
import type {Reactive} from 'vue'

type M = {
  name: string
}

type M2 = {
  name: string,
  age: number
}

// let list = reactive<string []>([])
let list = reactive<{
  arr: string []
}>({
  arr: []
})

const hanmes = () => {
  setTimeout(() => {
    let res = ['123', '2', '3']
    list.arr = res
    // list.push(...res)
  }, 2000)
}

//
const Man: Reactive<M> = reactive({
  name: '张三'
})

const sad = reactive<M2>({
  name: '23',
  age: 12
})

const handleClick = () => {
  Man.name = '李四'
}

</script>

<style scoped>
</style>
